<template>
    <div class="search-form isheader" v-if="headerShow">
        <div>
            <a-form size="small" :model="pageData" layout="inline">
                <a-form-item label="布号">
                    <a-input allow-clear :style="{ width: '10rem' }" class="bacClass" v-model="pageData.a" />
                </a-form-item>
                <a-form-item label="条形码" v-if="tabsKeys != 2">
                    <a-input allow-clear :style="{ width: '10rem' }" class="bacClass" v-model="pageData.b" />
                </a-form-item>
            </a-form>
        </div>
    </div>
    <div class="my-divisders">
        <a-divider orientation="center">
            <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
    </div>
    <div style="text-align: right;">
        <Toolbar :items="toolBarList" @select="selectHandler">
        </Toolbar>
    </div>
    <div class="gang"></div>
    <div :style="{ height: '83%', padding: '10px' }">
        <a-tabs   :lazy-load="true" :justify="true" :default-active-key="tabsKeys" @change="tabsChanges">
            <a-tab-pane title="明细" :key="1">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                    style="height:94%" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                    :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :total="fySelet2.total" show-total show-jumper show-page-size @change="PageSize2"
                    @page-size-change="change2" style="justify-content: center" :page-size="fySelet2.size"
                    :current="fySelet2.page" />
            </a-tab-pane>
            <a-tab-pane title="拆分明细" :key="2">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady2"
                    style="height:94%" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList2"
                    :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :total="fySelet2.total" show-total show-jumper show-page-size @change="PageSize2"
                    @page-size-change="change2" style="justify-content: center" :page-size="fySelet2.size"
                    :current="fySelet2.page" />
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { post, get } from "@/api/http"
import { localeText } from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import { Message, Modal } from "@arco-design/web-vue"

const headerShow = ref(true)
const localeText1: any = ref(localeText)
const tabsKeys: any = ref(1)
const toolBarList: any = ref(['查询', '拆分'])
const tabsChanges = (e: any) => {
    tabsKeys.value = e
    fySelet2.page = 1
    if (e == 1) {
        toolBarList.value = ['查询', '拆分']
    } else if (e == 2) {
        toolBarList.value = ['查询']
    }
}
const pageData: any = reactive({
    a: '',
    b: '',
})

const selectHandler = () => {
    if (tabsKeys.value == 1) {
        wjYcList()
    } else if (tabsKeys.value == 2) {
        wjYcList2()
    }
}
const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const tableDataList2: any = ref([])
const gridOption2 = ref()
const gridReady2 = (params: any) => {
    gridOption2.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}

const fySelet2: any = reactive({
    total: 10,
    size: 10,
    page: 1
})

const PageSize2 = (val: any) => {
    fySelet2.page = val
    if (tabsKeys.value == 1) {
        wjYcList()
    } else if (tabsKeys.value == 2) {
        wjYcList2()
    }
}

const change2 = (val: any) => {
    fySelet2.size = val
    if (tabsKeys.value == 1) {
        wjYcList()
    } else if (tabsKeys.value == 2) {
        wjYcList2()
    }
}

const tc = [
    {
        showRowGroup: 'hide_def',
        "headerName": "",
        "checkboxSelection": true,
        "headerCheckboxSelection": true,
        "pinned": "left",
        "width": 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: "left",
    },
    {
        headerName: '公司',
        field: 'firm',
        // pinned: o['fixed'],
        width: 150
    },
    {
        headerName: '仓库',
        field: 'warehouse',
        width: 150
    },
    {
        headerName: '客户',
        field: 'customName',
        width: 150
    },
    {
        headerName: '流转卡号',
        field: 'yarnCode',
        width: 150
    },
    {
        headerName: '订单号',
        field: 'yarnName',
        width: 150
    },
    {
        headerName: '条形码',
        field: 'yarnBrand',
        width: 150
    },
    {
        headerName: '布号',
        field: 'productionBatch',
        width: 150
    },
    {
        headerName: '品名',
        field: 'level',
        width: 150
    },
    {
        headerName: '色号',
        field: 'matchColor',
        width: 150
    },
    {
        headerName: '色称',
        field: 'colorCode',
        width: 150
    },
    {
        headerName: '匹号',
        field: 'colorName',
        width: 150
    },
    {
        headerName: '成品重量',
        field: 'pieceNumber',
        width: 150
    },
    {
        headerName: '布笼',
        field: 'pieceWeight',
        width: 150
    },
]

const wjYcList = () => {
    post({
        url: 'wms/yarnStock/getPage',
        data: {
            page: fySelet2.page,
            size: fySelet2.size,
            firm_id: pageData.a,
            warehouse_id: pageData.b,
            yarn_code: pageData.yarnCode,
            yarn_name: pageData.yarnName,
            yarn_brand: pageData.yarnBrand,
            production_batch: pageData.productionBatch,
            level: pageData.level
        }
    }).then((res: any) => {
        gridOption.value.setRowData(res.data.list)
        tableDataList.value = res.data.list
        fySelet2.total = res.data.total
    })
}

const wjYcList2 = () => {
    post({
        url: 'wms/yarnStock/getPage',
        data: {
            page: fySelet2.page,
            size: fySelet2.size,
            firm_id: pageData.a,
            warehouse_id: pageData.b,
            yarn_code: pageData.yarnCode,
            yarn_name: pageData.yarnName,
            yarn_brand: pageData.yarnBrand,
            production_batch: pageData.productionBatch,
            level: pageData.level
        }
    }).then((res: any) => {
        gridOption2.value.setRowData(res.data.list)
        tableDataList2.value = res.data.list
        fySelet2.total = res.data.total
    })
}

</script>